import React from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types'
import { Table , Modal, Menu, Icon, Button } from 'antd'
import Query from './Query'
import Toggles from '../../components/Toggles'
import styles from './index.less';
import classnames from 'classnames'
import { Link } from 'dva/router'
import DropOption  from '../../components/DropOption/DropOption'


const confirm = Modal.confirm

function List ({
  contract: {
    list,
    load
  },
  onSearch,
  onDeleteItem,
  onEditItem,
  onInsertItem,
  location
  }) {

  const handleMenuClick = (record, e) => {
    if (e.key === '1') {
      onEditItem(record)
    } else if (e.key === '2') {
      confirm({
        title: '您确定要删除这条记录吗?',
        onOk () {
          onDeleteItem(record.id)
        },
      })
    }else if (e.key === '3') {
      onInsertItem(record)

    }
  }



  const columns1 = [

    {
      title: '合同编号',
      dataIndex: 'contractNumber',
      key: 'contractNumber',

    }, {
      title: '合同名称',
      dataIndex: 'contractTitle',
      key: 'contractTitle',

    }, {
      title: '客户',
      dataIndex: 'client',
      key: 'client',

    }, {
      title: '客户编号',
      dataIndex: 'businessCustomerNumber',
      key: 'sex',

    }, {
      title: '签单方',
      dataIndex: 'businessSignParty',
      key: 'businessSignParty',

    }, {
      title: '合同起始日期',
      dataIndex: 'industry',
      key: 'industry',

    }, {
      title: '合同终止日期',
      dataIndex: 'contractTerminationDate',
      key: 'contractTerminationDate',

    }, {
      title: '合同状态',
      dataIndex: 'contractstatus',
      key: 'contractstatus',
    }, {
      title: '销售',
      dataIndex: 'sales',
      key: 'sales',
    }, {
      title: '责任客服',
      dataIndex: 'responsibleCustomerService',
      key: 'responsibleCustomerService',
    },{
      title: '上传附件',
      dataIndex: 'uploadAttachment',
      key: 'uploadAttachment',
    },
    {
      title: '首版合同',
      dataIndex: 'firstEditionContract',
      key: 'firstEditionContract',
    },
    {
      title: '上版合同',
      dataIndex: 'onTheContract',
      key: 'onTheContract',
    },
    {
      title: '原始文件名',
      dataIndex: 'originalFileName',
      key: 'originalFileName',
    },
    {
      title: '备注',
      dataIndex: 'remarks',
      key: 'remarks',
    },
    {
      title: '创建人',
      dataIndex: 'founder',
      key: 'founder',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
    },
    {
      title: '变更人',
      dataIndex: 'changePerson',
      key: 'changePerson',
    },
    {
      title: '变更时间',
      dataIndex: 'changeTime',
      key: 'changeTime',
    },
    {
     title: '操作',
     key: 'operation',

     render: (text, record) => {
       return <DropOption onMenuClick={e => handleMenuClick(record, e)} menuOptions={[{ key: '1', name: '修改' }, { key: '2', name: '删除' },{ key: '3',name:'添加'}]} />
     },
   },
  ]

  return (
    <div className="content-inner">
      <Toggles name='查询条件'>
        <Query onOk={onSearch} />
      </Toggles>
      <div style={{padding: '0 2px'}}>
      <Button.Group>
        <Button type="primary" icon="plus-circle-o">合同签署</Button>
        <Button type="primary" icon="edit" >修改合同</Button>
        <Button type="primary" icon="delete" >合同续签</Button>
        <Button type="primary" icon="search">合同作废</Button>
        <Button type="primary" icon="logout">导出</Button>
        <Button type="primary" icon="close-circle-o">合同终止</Button>
        <Button type="primary" icon="aliwangwang-o">合同查看</Button>
      </Button.Group>
      </div>
      <div style={{'background': 'white'}}>
      <Table
        pagination={{
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: total => `共 ${total} 条`,
        }}
        loading={load}
        dataSource={list}
        //className={classnames({ [styles.table]: true, [styles.motion]: true })}
        className = {styles.table}
        bordered
        simple
        rowKey={record => record.id}
        columns={columns1}
        bordered={false}
        scroll={{ x: 1250 }}
      />
      </div>
    </div>
  );
}

// List.propTypes = {
//   use: PropTypes.object.isRequired,
//   onDeleteItem: PropTypes.func.isRequired,
//   onEditItem: PropTypes.func.isRequired
// };

export default List;
